<!-- 
@created by   2018-06-13 09:26:38
@description 
 -->
<!-- 必须全局拥有唯一的id -->
<div id="flowWholeLifeCycle">
    <el-form-q :field-data="queryFields" :buttons="queryButtons"></el-form-q>
    <div class="yu-toolBar">
        <el-button-group>
            <el-button icon="document" @click="infoFn">查看</el-button>
        </el-button-group>
    </div>
    <el-table-x ref="flowInstanceInfos" :max-height="height" :radiobox="false" :data-url="flowInstanceInfoUrl" request-type="POST" :table-columns="flowInstanceInfoTableColumn"></el-table-x>

    <el-dialog-x title="流程跟踪" :visible.sync="viewWholeLifeCycle" size="full" v-if="viewWholeLifeCycle">
        <el-row>
            <el-col :span="5">
                <el-tree-x ref="stageAndEvent" :height="height - 20" @node-click="nodeClickFn" :data-url="treeDataUrl" data-id="treeNodeId" data-label="treeNodeName"
                    :data-params="treeParam" :root-visible="false" data-pid="treeParentId" :data-root="dataRoot" style="margin:10px 10px 0 0;">
                </el-tree-x>
            </el-col>
            <el-col :span="19">
                <el-button-group>
                    <el-button icon="document" @click="viewAprv">查看节点审批信息</el-button>
                    <el-button icon="document" @click="viewTask">查看节点任务运行信息</el-button>
                </el-button-group>
                <el-table-x ref="nodeInstanceInfos" :max-height="height - 20" :radiobox="false" :data-url="nodeInstanceInfosUrl" 
                    :table-columns="nodeInstanceInfoTableColumn" :default-load="false" :pageable="false"></el-table-x>
            </el-col>
        </el-row>
    </el-dialog-x>
    
    <el-dialog-x title="任务运行列表" :visible.sync="viewTaskList" width="800px" height="600px">
        <el-table-x ref="taskInstanceInfos" :radiobox="false" :data-url="taskInstanceInfoUrl" 
            :table-columns="taskInstanceInfoTableColumn" :pageable="false" :default-load="false"></el-table-x>
        <div align="center"><el-button icon="document" @click="closeTask" >返回</el-button></div>    
    </el-dialog-x>
    
    <el-dialog title="页面审批信息"  :visible.sync="pageAprvInfo" size="full">
       <el-row>
          <el-col :span="4" style="background-color: #1f2d3d;" :style="myStyle">
              <ul class="page-sidebar-menu" >
                <li class="active open">
                    <a href="javascript:void(0);" class="yu-isMenu" >
                      <i class="el-icon-yx-flow-1"></i><span class="title">{{bizNodeName}}</span><span class="arrow open"></span></a>
                    <ul class="sub-menu" style="display: block;">
                        <li :class="pagePlugin.show ? 'active open' : '' " 
                          v-for="(pagePlugin, index) in vos" 
                          @click="showPage(pagePlugin.bizPluginId)">
                          <a href="javascript:void(0);" class="yu-isMenu" >
                              <i class="el-icon-yx-flow-1"></i><span class="title">{{pagePlugin.taskName}}</span>
                           </a>
                        </li>
                    </ul>
                </li>
              </ul>
          </el-col>
          <el-col :span="20":style="myStyle">
               <div type="border-card" style="height: 100%;">
                  <div v-show="pagePlugin.show" :name="pagePlugin.bizPluginId" v-for="(pagePlugin, index) in vos">
                    <div :id="pagePlugin.bizPluginId"></div>
                  </div>
                </div>
          </el-col>
      </el-row>
	    <div style="text-align: center; margin-top: 10px;">
	        <el-button icon="yx-switch" type="info" @click="close">关闭</el-button>
	    </div>
    </el-dialog>
</div>